import React, { useEffect, useState } from "react";
import { Card, message, Spin, Typography, Row, Col, Grid } from "antd";
import { history, useModel } from "@umijs/max";
import { getByPage1 } from "@/services/swagger/interviewController";

const { Paragraph } = Typography;
const { useBreakpoint } = Grid;

const Interview: React.FC = () => {
  const initialState = useModel("@@initialState");
  const currentUser = initialState.initialState?.currentUser;
  const [interviewList, setInterviewList] = useState<API.InterviewVo[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const screens = useBreakpoint();

  const interviewQueryRequest: API.InterviewQueryRequest = {
    current: 1,
    pageSize: 10,
  };

  const getUserInterviewRecord = async () => {
    if (!currentUser?.id) return;
    try {
      setLoading(true);
      const res = await getByPage1({ userId: currentUser.id }, interviewQueryRequest);

      if (res.code === 0) {
        setInterviewList(res.data || []);
        message.success("获取面试记录成功");
      } else {
        message.error(res.message || "获取面试记录失败");
      }
    } catch (error) {
      console.error("获取面试记录出错:", error);
      message.error("网络异常，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (currentUser) {
      getUserInterviewRecord();
    } else {
      setLoading(false);
      message.warning("请先登录");
      history.push("/user/login");
    }
  }, [currentUser]);

  const renderStatusTag = (status?: number) => {
    switch (status) {
      case 1:
        return <span style={{ color: "#1890ff" }}>面试中</span>;
      case 2:
        return <span style={{ color: "#52c41a" }}>面试结束</span>;
      default:
        return <span>未开始</span>;
    }
  };

  // 根据屏幕宽度动态设置每行列数
  const getColSpan = () => {
    if (screens.xs) return 24; // 手机：1列
    if (screens.sm) return 12; // 平板：2列
    if (screens.md) return 12;
    if (screens.lg) return 8;  // 小桌面：3列
    if (screens.xl) return 6; // 大屏：4列
    return 8;
  };

  return (
    <div style={{ padding: "24px", maxWidth: 1400, margin: "0 auto" }}>
      <Typography.Title level={2} style={{ marginBottom: 24 }}>
        我的面试记录
      </Typography.Title>

      {loading ? (
        <div style={{ textAlign: "center", padding: "60px 0" }}>
          <Spin size="large" />
        </div>
      ) : interviewList.length > 0 ? (
        <Row gutter={[24, 24]}>
          {interviewList.map((interview) => (
            <Col key={interview.id} xs={24} sm={12} md={12} lg={8} xl={6}>
              <Card
                hoverable
                title={<Typography.Text strong>{interview.jobTitle}</Typography.Text>}
                extra={
                  <a onClick={() => history.push(`/interview/result/${interview.id}`)}>
                    查看详情
                  </a>
                }
                style={{ height: "100%" }}
              >
                <div style={{ minHeight: 180 }}>
                  <p>
                    <Typography.Text type="secondary">岗位描述：</Typography.Text>
                    <Paragraph
                      ellipsis={{ rows: 2 }}
                      style={{ fontSize: 14, marginBottom: 12 }}
                    >
                      {interview.jobDescription || "暂无描述"}
                    </Paragraph>
                  </p>
                  <p>
                    <Typography.Text type="secondary">简历摘要：</Typography.Text>
                    <Paragraph
                      ellipsis={{ rows: 2 }}
                      style={{ fontSize: 14, marginBottom: 12 }}
                    >
                      {interview.resumeContent || "暂无内容"}
                    </Paragraph>
                  </p>
                  <p>
                    <Typography.Text type="secondary">开始时间：</Typography.Text>
                    {interview.startTime
                      ? new Date(interview.startTime).toLocaleString("zh-CN")
                      : "未设置"}
                  </p>
                  <p>
                    <Typography.Text type="secondary">面试状态：</Typography.Text>
                    {renderStatusTag(interview.status)}
                  </p>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      ) : (
        <Card style={{ textAlign: "center", padding: "60px 20px" }}>
          <Typography.Text type="secondary" style={{ fontSize: 16 }}>
            暂无面试记录
          </Typography.Text>
        </Card>
      )}
    </div>
  );
};

export default Interview;
